<template>
    <div class="View">
        <div class="tabs">
            <!-- <div class="btn" :class="showFlg == 1 ? 'activeBtn' : ''" @click.self="showFlg = 1">
                <span @click.self="showFlg = 1">{{ $t('message.homeExt.tab1.title') }}</span>
            </div>
            <div class="btn" :class="showFlg == 2 ? 'activeBtn' : ''" @click.self="showFlg = 2">
                <span @click.self="showFlg = 2">{{ $t('message.homeExt.tab2.title') }}</span>
            </div>
            <div class="btn" :class="showFlg == 3 ? 'activeBtn' : ''" @click.self="showFlg = 3">
                <span @click.self="showFlg = 3">{{ $t('message.homeExt.tab3.title') }}</span>
            </div> -->

            <el-button style="height: 32px; line-height: 0;margin: 0;width: 34% !important;border-radius: 0;"
                @click="showFlg = 1" :type="showFlg == 1 ? 'primary' : ''">{{
                    $t('message.homeExt.tab1.title')
                }}</el-button>
            <el-button style="height: 32px; line-height: 0;margin: 0;width: 34% !important;border-radius: 0;"
                @click="showFlg = 2" :type="showFlg == 2 ? 'primary' : ''">{{
                    $t('message.homeExt.tab2.title')
                }}</el-button>
            <el-button style="height: 32px; line-height: 0;margin: 0;width: 34% !important;border-radius: 0;"
                @click="showFlg = 3" :type="showFlg == 3 ? 'primary' : ''">{{
                    $t('message.homeExt.tab3.title')
                }}</el-button>

        </div>

        <tab1 ref="tab1" class="content" v-show="showFlg == 1" :macStyle="macStyle" :macStyleCom="macStyleCom"
            @getExtCodSourceComboxApi="getExtCodSourceComboxApi"></tab1>
        <tab2 ref="tab2" class="content" v-show="showFlg == 2" :macStyle="macStyle" :inspRes="inspRes" :isShow="isShow"
            :inspResCom="inspResCom" @getExtCodSourceComboxApi="getExtCodSourceComboxApi"></tab2>
        <tab3 ref="tab3" class="content" v-show="showFlg == 3" :thickRes="thickRes" :thickResCom="thickResCom"></tab3>

        <footer class="footer-view">
            <el-button @click="clearFn">{{ $t("message.planView.btn.clear") }}</el-button>
            <el-button @click="saveFn" type="primary">{{ $t("message.planView.btn.get") }}</el-button>
            <el-button @click="close" type="warning">
                {{ $t("message.public.close") }}
            </el-button>
        </footer>
    </div>
</template>

<script>
import $ from "jquery";
import Tab1 from './tabs/tab1.vue'
import Tab2 from './tabs/tab2.vue'
import Tab3 from './tabs/tab3.vue'
import { getExtCodSourceByUser, getExtCodSourceCombox, extCodSourceByUser, delCodSourceByUser, getClearMsg, getCtgSymb } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
export default {
    name: "Retrieval",
    data() {
        return {
            showFlg: 1,
            isShow: false,

            macStyle: {},
            inspRes: {},
            thickRes: {},
            macStyleCom: {},
            inspResCom: {},
            thickResCom: {},
        };
    },
    props: ['styleOptionsValue'],
    components: { Tab1, Tab2, Tab3 },
    watch: {},
    methods: {
        async clearFn() {
            const { macStyle, inspRes, thickRes } = await this.getStartJson();
            this.macStyle = macStyle;
            this.inspRes = inspRes;
            this.thickRes = thickRes;
        },
        // // 清空
        async delCodSourceByUserApi() {
            try {
                await this.showConfirmDialog();
                let dataJson = {
                    Account: getLocalStorage('userName'),
                }
                let res = await delCodSourceByUser(dataJson);
                if (res.data.code != 0) {
                    this.$alert(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });

                    return;
                }
                this.$store.state.btn_set_BHView = await _.isEqual(await this.getStartJson(), await this.getExtCodSourceByUserApi(true));
                eventBus.$emit('reGetPFD');
                this.$message({
                    message: res.data.msg,
                    type: "success",
                });
                this.initFn();
            } catch (err) {
                console.log(err);
                if (err == 'cancel') {
                    return
                }
            }
        },
        // 显示确认弹窗
        async showConfirmDialog() {
            let rea = await getClearMsg({});
            await this.$confirm(rea.data.msg, '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning'
            });
        },

        // 抽出
        async saveFn() {
            let dataJson = {
                Account: getLocalStorage('userName'),
                MacStyle: this.macStyle,
                InspRes: this.inspRes,
                ThickRes: this.thickRes
            }
            let res = await extCodSourceByUser(dataJson);
            if (res.data.code != 0) {
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });

                return
            }
            // await this.getExtCodSourceByUserApi()
            this.close();

            this.$store.state.btn_set_BHView = _.isEqual(await this.getStartJson(), await this.getExtCodSourceByUserApi(true));
            console.log('this.$store.state.btn_set_BHView', this.$store.state.btn_set_BHView);
            console.log(await this.getStartJson());
            console.log(await this.getExtCodSourceByUserApi(true));
            if (this.styleOptionsValue == 3) {
                eventBus.$emit('reGetPFD');
            }
            if (this.styleOptionsValue == 2) {
                this.initFn();
            }
            if (!this.styleOptionsValue) {
                eventBus.$emit('GetMachineByCodFnEmT');
            }
        },
        close() {
            this.$emit('showRetrievalBtn')
        },
        // 获取用户的抽出条件
        async getExtCodSourceByUserApi(isReturn) {
            const dataJson = {
                Account: getLocalStorage('userName'), // 登录账号
            };
            const res = await getExtCodSourceByUser(dataJson);
            // console.log(_.isEqual(this.getStartJson(), res.data.data));
            // console.log(JSON.stringify(res.data.data));

            const { macStyle, inspRes, thickRes } = res.data.data;
            this.macStyle = macStyle;
            this.inspRes = inspRes;
            this.thickRes = thickRes;
            // this.inspRes.crrCode = '<';

            this.$store.state.btn_set_BHView = _.isEqual(await this.getStartJson(), res.data.data);
            if (isReturn) {
                return res.data.data;
            }
        },
        // 判断是否为管道

        async getCtgSymbApi() {
            let dataJson = {
                CtgCode: this.macStyle.ctgCode,//	是	int	カテゴリCode
            }
            const res = await getCtgSymb(dataJson);
            this.isShow = Boolean(res.data.data);

        },
        // 获取下拉框的集合
        async getExtCodSourceComboxApi(isOnce = true, tab) {
            let dataJson = {
                Account: getLocalStorage('userName'),//	是	string	登录账号
                PltCode: this.$store.state.pltCode || 9,//	是	int	装置Code
                PrnCode: this.macStyle.ctgCode,//	是	int	カテゴリCode
                IspClsCode: this.inspRes.ispClsCode
            }
            const res = await getExtCodSourceCombox(dataJson);
            const { macStyle, inspRes, thickRes } = res.data.data;
            this.macStyleCom = macStyle;
            this.inspResCom = inspRes;
            this.thickResCom = thickRes;
            await this.getCtgSymbApi();
            if (!isOnce) {
                if (tab == 'tab1') {
                    this.macStyle.stCode = null;
                    this.macStyle.fncCode = null;
                }
                if (tab == 'tab2') {
                    this.inspRes.ispWayCode = null;
                }
            }
        },
        // 第一次，
        async initFn(flg = false) {
            if (flg) this.showFlg = 1
            await Promise.all([
                this.getExtCodSourceComboxApi(),

                this.getExtCodSourceByUserApi(),
            ]).then(() => {
                // 重新加载表格
                if (!flg) eventBus.$emit('LoadReadingTabelData');
            }).catch(err => {
               
            });
        },
        async getStartJson() {
            // const dataJson = {
            //     "macStyle": {
            //         "macNumb": "",
            //         "lineNo": "",
            //         "ctgCode": 0,
            //         "from": "",
            //         "to": "",
            //         "lawCode": 0,
            //         "makDate": "",
            //         "mkrCode": 0,
            //         "impCode": 0,
            //         "stCode": 0,
            //         "fncCode": 0,
            //         "outCode": 0,
            //         "secCode": 0,
            //         "note": "",
            //         "useCase": 0,
            //         "designPressLowerLimit": 0,
            //         "designPressLowerLimitTex": "",
            //         "designPressUpperLimit": 0,
            //         "designPressUpperLimitTex": "",
            //         "designTempLowerLimit": 0,
            //         "designTempLowerLimitTex": "",
            //         "designTempUpperLimit": 0,
            //         "designTempUpperLimitTex": "",
            //         "funPressLowerLimit": 0,
            //         "funPressLowerLimitTex": "",
            //         "funPressUpperLimit": 0,
            //         "funPressUpperLimitTex": "",
            //         "funTempLowerLimit": 0,
            //         "funTempLowerLimitTex": "",
            //         "funTempUpperLimit": 0,
            //         "funTempUpperLimitTex": "",
            //         "fluidName": "",
            //         "clsCode": 0,
            //         "chrCode": 0,
            //         "kbnCode": 0
            //     },
            //     "inspRes": {
            //         "form": "",
            //         "to": "",
            //         "objData": 0,
            //         "lineNo": "",
            //         "ispClsCode": 0,
            //         "ispWayCode": 0,
            //         "ispRes": "",
            //         "countermeasures": "",
            //         "nextAnnouncement": "",
            //         "ispRstCode": 0,
            //         "dpsTypeCode": 0,
            //         "rangeCode": "",
            //         "corrDepth": "",
            //         "crrCode": "",
            //         "crrStr": "",
            //         "rateCode": "",
            //         "rateStr": "",
            //         "lifeCode": "",
            //         "lifeStr": "",
            //         "coreLoopCode": 0
            //     },
            //     "thickRes": {
            //         "corrResCondFlag": 0,
            //         "corrReteFlag": true,
            //         "corrReteCode": "",
            //         "corrReteStr": "",
            //         "baseValComparFlag": true,
            //         "baseValCompar1Code": "",
            //         "baseValCompar11Code": "",
            //         "baseValCompar1Str": "",
            //         "baseValCompar2Code": "",
            //         "baseValCompar2Str": "",
            //         "lifeSearchFlag": true,
            //         "lifeSearchCode": "",
            //         "lifeSearchStr": "",
            //         "baseLife": null,
            //         "residualLifeCalcFlag": true,
            //         "residualLifeCalcLongTermFlag": true,
            //         "residualLifeCalcShortTermFlag": true,
            //         "residualLifeCalcMinMultFlag": true
            //     }
            // };
            // return dataJson;
            const dataJson = {
                Account: '!@#$%^&(*)_#$%^&*()&', // 登录账号
            };
            const res = await getExtCodSourceByUser(dataJson);
            return res.data.data
        }

    },
    created() {

    },
    mounted() {
        this.initFn();
        // this.$refs.tab1.initFn();
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {}

.tabs {
    display: flex;
    padding: 16px;
    height: 32px;

    // button: {
    //     height: 32px;
    //     line-height: 0;
    // }

    // .btn {
    //     width: 33.3%;
    //     border: 1px solid #C3C3C3;
    //     height: 32px;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     cursor: pointer;

    //     &:nth-child(2) {
    //         border-left: 0;
    //         border-right: 0;
    //     }

    //     span {
    //         margin-left: 8px;
    //     }
    // }

    // .activeBtn {
    //     background-color: #106EBE;
    //     color: #FFF;

    // }
}

.content {
    width: 100%;
    height: calc(100% - 110px);
    // background-color: red;
    margin-top: 25px;
    overflow-y: scroll;
    padding-bottom: 50px;
}

.footer-view {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 47px;
    padding: 0 15px;
    border-top: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    background: #ffffff;

    button {
        min-width: 82px;
        height: 32px;
        line-height: 0;
        // border: 1px solid #d9d9d9;
        // margin-right: 12px;
        // border-radius: 4px;
    }

    button:nth-child(2) {
        // background: #106ebe;
        // color: #fff;
        padding: 0 15px;
    }

    button:nth-child(3) {
        position: absolute;
        // background: #eb7421;
        // color: #fff;
        margin-right: 12px;
        right: 0px;
    }
}
</style>
